import { Tabs } from 'antd'
import { useEffect, useState } from 'react'

import { statementDetailApi, statementListApi } from '@/api/pcs/pcsStatementManage'
import AekDrawer, { PromiseThen } from '@/components/AekDrawer'
import AekForm from '@/components/AekForm'
import AekLinkButton from '@/components/AekLinkButton'
import AekTable from '@/components/AekTable'
import DetailWithPageUpDown from '@/components/DetailWithPageUpDown'
import PageLayout from '@/components/PageLayout'
import { namespace } from '@/models/pcs/pcsStatementManage'
import { getUrlParams } from '@/router/navigate'
import { formatDate, formatDateTime, formatMoneyNum } from '@/utils/displayHelper'
import {
  PCS_BILL_TYPE_ENUM,
  PCS_COMBO_TYPE_ENUM,
  PCS_COMPANION_PERIOD_ENUM,
  PCS_STATEMENT_DETAIL_TAB_ENUM,
  PCS_STATEMENT_STATUS_ENUM,
} from '@/utils/enum'
import { requestWithTry } from '@/utils/request'

import DetailDrawer from '../../pcsCompanionOrder/components/DetailDrawer'

/** 陪护 - 结算详情 */
const Detail = ({ id }) => {
  const [detail, setDetail] = useState(null)
  const [tab, setTab] = useState(PCS_STATEMENT_DETAIL_TAB_ENUM.SUMMARY)

  useEffect(() => {
    if (!id) return
    requestWithTry(statementDetailApi, {
      statementId: id,
    }).then(({ data }) => {
      setDetail(data)
    })
  }, [])

  const onDetail = ({ id }) => {
    DetailDrawer.PromiseThen({ id, hideOperate: true })
  }

  /** @type {import("@/components/AekForm").FormDataProps[]} */
  const formData = [
    {
      field: 'statementNo',
      label: '结算单号',
      component: {
        name: 'Input',
      },
    },
    {
      field: 'status',
      label: '状态',
      component: {
        name: 'Select',
        options: PCS_STATEMENT_STATUS_ENUM.options,
      },
      viewRender: value => PCS_STATEMENT_STATUS_ENUM.getText(value),
    },
    {
      field: 'billTotalAmount',
      label: '账单总金额',
      component: {
        name: 'Input',
      },
      viewRender: value => <span className='c-money'>{formatMoneyNum(value)}</span>,
    },
    {
      field: 'payCommission',
      label: '账单支付手续费',
      component: {
        name: 'Input',
      },
      viewRender: value => <span className='c-money'>{formatMoneyNum(value)}</span>,
    },
    {
      field: 'nursingAmount',
      label: '护工费用',
      component: {
        name: 'Input',
      },
      viewRender: value => <span className='c-money'>{formatMoneyNum(value)}</span>,
    },
    {
      field: 'confirmUserName',
      label: '确认人',
      component: {
        name: 'Input',
      },
    },
    {
      field: 'confirmTime',
      label: '确认时间',
      component: {
        name: 'RangePicker',
      },
      col: 12,
      viewRender: value => formatDateTime(value),
    },
  ]

  /** @type {import("@/components/AekTable").AekTableProps} */
  const tableProps = {
    configKey: namespace,
    rowKey: 'id',
    dataSource: detail
      ? tab === PCS_STATEMENT_DETAIL_TAB_ENUM.SUMMARY
        ? detail.statementDetailList
        : detail.billManageList
      : [],
    columns:
      tab === PCS_STATEMENT_DETAIL_TAB_ENUM.SUMMARY
        ? [
            { dataIndex: 'nursingWorkerName', title: '护工姓名' },
            { dataIndex: 'billNum', title: '账单数量' },
            { dataIndex: 'billTotalAmount', title: '账单费用', isMoney: true },
            { dataIndex: 'nursingAmount', title: '护工费用', isMoney: true },
          ]
        : [
            { dataIndex: 'billNo', title: '账单号码' },
            {
              dataIndex: 'orderNo',
              title: '订单号码',
              render: (text, row) => (
                <AekLinkButton onClick={() => onDetail({ id: row.orderId })}>{text}</AekLinkButton>
              ),
            },
            { dataIndex: 'patientName', title: '患者姓名' },
            { dataIndex: 'inpatientWardName', title: '地点' },
            { dataIndex: 'companionComboName', title: '套餐名称' },
            { dataIndex: 'comboType', title: '套餐类型', enum: PCS_COMBO_TYPE_ENUM },
            { dataIndex: 'nursingWorkersName', title: '护工姓名' },
            { dataIndex: 'chargingStandard', title: '收费标准' },
            { dataIndex: 'nursingWorkerSettlement', title: '护工结算' },
            { dataIndex: 'orderCreateTime', title: '工单创建时间', isDateTime: true },
            {
              dataIndex: 'startPeriod',
              title: '服务开始时间',
              render: (text, row) => `${formatDate(row.startDate)} ${PCS_COMPANION_PERIOD_ENUM.getText(text)}`,
            },
            {
              dataIndex: 'endPeriod',
              title: '服务结束时间',
              render: (text, row) => `${formatDate(row.endDate)} ${PCS_COMPANION_PERIOD_ENUM.getText(text)}`,
            },
            {
              dataIndex: 'serviceDays',
              title: '服务时长',
              render: text => `${text}天`,
            },
            {
              dataIndex: 'billType',
              title: '账单类型',
              enum: PCS_BILL_TYPE_ENUM,
            },
            {
              dataIndex: 'confirmUserName',
              title: '确认人',
            },
            {
              dataIndex: 'confirmTime',
              title: '确认时间',
              isDateTime: true,
            },
            {
              dataIndex: 'billTotalAmount',
              title: '账单费用',
              isMoney: true,
              fixed: 'right',
            },
            {
              dataIndex: 'payCommission',
              title: '支付手续费',
              isMoney: true,
              fixed: 'right',
            },
            {
              dataIndex: 'nursingAmount',
              title: '护工费用',
              isMoney: true,
              fixed: 'right',
            },
          ],
  }

  return (
    <PageLayout>
      <AekForm formData={formData} allView detail={detail} col={6} />
      <Tabs
        activeKey={String(tab)}
        items={PCS_STATEMENT_DETAIL_TAB_ENUM.options.map(({ value, label }) => ({
          key: String(value),
          label,
        }))}
        onChange={setTab}
      />
      <AekTable {...tableProps} />
    </PageLayout>
  )
}

const PcsStatementDetail = ({ location }) => {
  const { search } = location
  const { id, showPageUpDown } = getUrlParams(search)

  return (
    <PageLayout>
      <DetailWithPageUpDown
        {...{
          id,
          showPageUpDown,
          sessionKey: 'statementState',
          pageListApi: statementListApi,
          idKey: 'statementId',
          noKey: 'statementNo',
          detailUrl: 'pcsStatementDetail',
          topMenuNamePrefix: '结算详情',
          DetailCom: Detail,
        }}
      />
    </PageLayout>
  )
}

export default PcsStatementDetail

export const PcsStatementDetailDrawer = ({ id }) => {
  return (
    <AekDrawer title='结算详情' width='90%' hideBottom>
      <Detail id={id} />
    </AekDrawer>
  )
}

PcsStatementDetailDrawer.PromiseThen = PromiseThen
